<template>
	<div>
		<div class="fujin">
			<img src="../assets/xiaowu.png" alt="">
			<span>附近商家</span>
		</div>
		<router-link v-for="item in datas" :key='item.id' class="shangpin" :to='"/home/"+item.id'>
			<div class="left">
				<img :src="imgath + item.image_path" alt="">
			</div>
			<div class="right">
				<div class="first">
					<div class="first1">
						<img src="../assets/pinpai.png" alt="">
						<span>{{item.name}}</span>
					</div>
					<div class="first2">
						<!-- 把获取到的数据，继续v-for循环，挖取深入的内容 -->
						<span v-for="(aaa,index) in item.supports" :key='index'>{{aaa.icon_name}}</span>
						
					</div>
				</div>
				<div class="second">
					<div class="second1">
                          <img src="../assets/xing.png" alt="">
						  <span class="s1">{{item.rating}}</span>
						  <span class="s2">{{"月销:"+item.recent_order_num+'单'}}</span>
					</div>
					<div class="second2">
						<img src="../assets/fengniao.png" alt="">
					</div>
				</div>
				<div class="third">
					<div class="third1">
						{{'￥'+ item.float_minimum_order_amount + '起送 / 配送费约￥' + item.float_delivery_fee}}
					</div>
					<div class="third2">
						{{item.distance + '公里 / ' + item.order_lead_time}}
					</div>
				</div>
			</div>
		</router-link>
	</div>
</template>

<script>
	export default {
		name: 'home_a',
		data: function() {
			return {
				params: {
					url: 'https://elm.cangdu.org/shopping/restaurants?latitude=31.22967&longitude=121.4762',
					methods: 'GET',
					key: 'home_a'
				},
				datas: '',
				zi: [],				
			}
		},
		//在页面创建之前发起网络请求拿到数据展示页面
		created() {
			let obj = this;
			// 第一个是函数名，第二是函数所需要的参数
			window.console.log(this.$store.dispatch('fetch', this.params));
			this.$store.dispatch('fetch', this.params).then(function(res) {
				// return res.data;
				obj.datas = res.data;
				 window.console.log(obj.datas);
			});
		},
		//在这里写计算属性主要为了拿到store文件中home的数据。
		computed: {
			imgath() {
				return this.$store.state.home.url1;
			}
		},
		//监听变化
		watch:{
			
		}
	}
</script>

<style scoped>
	.fujin {
		/* 弹性盒布局,让文字和图片在一个水平线 */
		display: flex;
		align-items: center;
		justify-content: flex-start;
		vertical-align: middle;
		margin: 20px;
	}

	.fujin img {
		width: 40px;
		margin-right: 20px;
	}

	.fujin span {
		color: #888888;
		font-size: 26px;
	}

	.shangpin {
		display: inline-block;
		padding: 30px 10px;
		overflow: hidden;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		color: black;
	}

	.left {
		width: 25%;
		float: left;	
	}

	.left img {
		height: 150px;
	}

	.right {
		float: left;
		width: 75%;
	}

	.first{
		width: 100%;
		
		display: flex;
		justify-content: space-between;
	}
	.first1 {
		
		width: 70%;
		/* 弹性盒布局,让文字和图片在一个水平线 */
		/* 设置容器的显示类型为弹性容器。 */
		display: flex; 
		 /* 弹性子元素在侧轴上的对其方式。 */
		align-items: center;
		/* 弹性子元素在弹性容器主轴上的对其方式。 */
		justify-content: flex-start;
		/* 该属性设置元素的垂直对齐方式。 */
		vertical-align: middle;	
		
	}
	.first1 img {
		width: 78px;
	}

	.first1 span {
		font-size: 30px;
		font-weight: 800;
		
	}
	.first2{
		font-size: 20px;
	}
	.second{
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin: 15px 0;
	}
	.second1{
		display: flex;
		justify-content: flex-start;
		align-content: center;
		width: 70%;
		height: 35px;
	}
	.second1 img{
		width: 25%;
		hight: 25px;
		
	}
	.s1{
		font-size: 22px;
		margin: 3px 10px 10px 0;
	}
	.s2{
		font-size: 22px;
	}
	.second2{
		width: 30%;
		margin-top: -10px;
	}
	.third{
		width: 100%;
		display: flex;
		justify-content: space-between;
		
	}
	.third1{
		width: 50%;
		font-size: 20px;
		
	}
	.third2{
		width: 50%;
		font-size: 20px;
	}
</style>